<template>
     <el-upload v-model:file-list="fileList" class="upload-demo" :headers="{
						token: Cookies.get(USER_TOKEN_KEY) || ''
					}" :action="uploadIp" multiple :on-preview="handlePreview" :on-success="uploadSuccess" :on-remove="handleRemove" :before-remove="beforeRemove" :limit="3" :on-exceed="handleExceed">
          <el-button type="primary">Click to upload</el-button>
          <template #tip>
               <div class="el-upload__tip">
                    jpg/png files with a size less than 500KB.
               </div>
          </template>
     </el-upload>
</template>	
   <script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import Cookies from 'js-cookie'
import { USER_TOKEN_KEY } from '@/store/keys'
import type { UploadProps, UploadUserFile } from 'element-plus'
import { baseIp } from '@/api/axios.config'

const uploadIp = ref<String>(baseIp + '/InterviewTable/upload')
console.log(uploadIp, 'upsd')
const fileList = ref<UploadUserFile[]>([])
	
const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
	console.log(file, uploadFiles, '123')
	sendFileToBackend(file)
}

const handlePreview: UploadProps['onPreview'] = uploadFile => {
	console.log(uploadFile)
	sendFileToBackend(uploadFile)
}

const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
	console.log(fileList.value, '333333333')
	ElMessage.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + uploadFiles.length} totally`)
}

const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
	console.log(fileList.value, '11111')
	console.log(uploadFile, '22222222222')
	return ElMessageBox.confirm(`Cancel the transfer of ${uploadFile.name} ?`).then(
		() => {
			sendFileToBackend(uploadFile)
			return true
		},
		() => false
	)
}

function sendFileToBackend(file: any) {
	// 在这里发送文件信息给后端，可以使用 AJAX 或其他方式发送请求
	console.log('Sending file to backend:', file)
	// 例如使用 axios 发送 POST 请求
	// axios.post('/api/upload', { fileName: file.name, fileSize: file.size })
	//   .then(response => {
	//     console.log('File sent to backend:', response.data)
	//   })
	//   .catch(error => {
	//     console.error('Failed to send file to backend:', error)
	//   })
}
</script>
   